<template>
    <div>
        <p-back>
            <div class="head">
                <p class="filter-name">过滤</p>
                <div class="head-right">
                    <!-- <span class="area">深圳</span>
                    <svg class="icon filter-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon--"></use>
                    </svg> -->
                </div>
            </div> 
        </p-back>
        <div class="filter-item">
            <!-- 宠物类型 -->
            <p class="pet-type-title">宠物类型</p>
            <div class="pet-type">                
                <filter-click v-for="(type,index) in petType" :key="index" class="pet-type-item" @click.native="getType(type.name)" :class="typeColor == type.name ? 'hover-color' :''">
                    <svg class="icon filter-icon" aria-hidden="true">
                        <use :xlink:href=type.svg></use>
                    </svg>
                    <p class="type-chinese">{{type.chinese}}</p>                   
                </filter-click>
            </div>
            <!-- 宠物品种 -->
            <div class="breed">           
                <p class="pet-type-title">宠物品种</p>
                <filter-click class="breed-select">
                    <p class="select-input"   @click="showMenu()">{{selectValue}}</p>
                    <van-icon name="arrow" />
                </filter-click>
                <div class="select-list" v-if="showDropmenu">
                    <p v-for="(item,index) in breed" :key="index" class="select-item" @click="selectBreed(item)">{{item}}</p>
                </div>
            </div>

            <div class="gender">
                <p class="pet-type-title">性别</p>
                <div class="gender-item"> 
                    <filter-click v-for="(item,index) in gender" :key="index" class="gender-item-click" @click.native="getGender(item.name)" :class="genderColor == item.name ? 'hover-color' : ''">
                        <p>{{item.chinese}}</p>                   
                    </filter-click>
                </div>
            </div>
            <div class="gender">
                <p class="pet-type-title">年龄</p>
                <div class="gender-item"> 
                    <filter-click v-for="(item,index) in age" :key="index" class="gender-item-click" @click.native="getAge(item.name)" :class="ageColor == item.name ? 'hover-color' : ''">
                        <p>{{item.chinese}}</p>                   
                    </filter-click>
                </div>
            </div>
            <div class="gender">
                <p class="pet-type-title">体型</p>
                <div class="gender-item"> 
                    <filter-click v-for="(item,index) in size" :key="index" class="gender-item-click" @click.native="getSize(item)" :class="sizeColor == item ? 'hover-color' : ''">
                        <p>{{item}}</p>                   
                    </filter-click>
                </div>              
            </div>
            <p-button class="button" @click.native="getfilterList()">查询</p-button>
        </div>        
    </div>
</template>
<script>
import PButton from '@/components/button.vue'
import FilterClick from '@/components/filterClick.vue'
import PBack from '@/components/back.vue'
import { gettypeInfo } from '@/api.js'
export default {
    components:{
        FilterClick,
        PBack,
        PButton      
    },
    data() {
        return{
            sizeColor:'',
            ageColor:'',
            genderColor:'',
            typeColor:'',
            selectValue:'',
            showDropmenu:false,
            petType:[
                {name:'Dog',svg:'#icon-gou1',chinese:'狗'},
                {name:'Cat',svg:'#icon-mao',chinese:'猫'},
                {name:'Bird',svg:"#icon-xiaoniao1",chinese:'鸟'},
                {name:'Rabbit',svg:"#icon-tuzi",chinese:'兔'}
            ],
            breed:[],
            gender:[
                {name:'male',chinese:'男'},
                {name:'female',chinese:'女'},
                {name:'Allgender',chinese:'全部'}
            ],
            age:[ {name:'baby',chinese:'幼年'},
                  {name:'young',chinese:'青年'},
                  {name:'adult',chinese:'成年'},
                  {name:'senior',chinese:'老年'},
                ],
            size:['S','M','L','XL'],
            msg:{}
        }
    },
    beforeMount(){
    document.addEventListener('click',e=>{
            if(e.target.className!='select-input'){
                this.showDropmenu = false
            }
        })
    },
    beforeDestroy(){
       const filterList = {kind:this.typeColor,type:this.selectValue,size:this.sizeColor,gender:this.genderColor,agelist:this.ageColor}
       this.$bus.$emit('filter',filterList)
    },
    methods:{
      getSize(value) {
        this.sizeColor = value
      },
      getAge(value) {
        this.ageColor =value
      },
      async getType(value){
          this.typeColor = value
          const {data} = await gettypeInfo({name:value})
          this.breed = data.breed
          this.selectValue = ''
        },
        getGender(value){
          this.genderColor = value
        },
        showMenu(){ 
          // debugger
          if(this.breed.length === 0){
            this.showDropmenu = false
          }else{
            this.showDropmenu = !this.showDropmenu
          }            
        },
        selectBreed(value){
            this.selectValue = value
        },
        async getfilterList() {
          this.$router.push('/search_petlist')
        }
    }
}
</script>
<style lang="less" scoped>
.filter-item{
    padding: 0.5rem;
    .pet-type-title{
        margin-bottom: 0.3rem;
        font-size: 0.42rem;
    }
    .pet-type{
        display: flex;
        justify-content: space-between;
        .pet-type-item{
            display: flex;
            align-items: center;
            padding:0.2rem 0.25rem;
            .type-chinese{
                margin-left: 0.2rem;
                font-size: 0.38rem;
            }
        }
    }
    .breed {
        position: relative;
        margin-top: 0.5rem;
        .breed-select{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;
            .select-input{
                font-size: 0.38rem;
                background: none;
                flex:1;
                height: 0.5rem;
                line-height: 0.5rem;
                text-align: left;
            }
        }
        .select-list{
            margin-top: 0.2rem;
            position: absolute;
            width: 100%;
            background: white;
            height: 3.3rem;
            overflow-y: auto;
            .select-item{
                height: 0.9rem;
                line-height: 0.9rem;
                font-size: 0.38rem;
                padding-left: 0.1rem;
            }:hover{
                color: #7db5fa;
            }
        }
    }
    .gender{
        margin-top: 0.5rem;
        .gender-item{
            display:flex;
            .gender-item-click{
              flex:1;
              font-size: 0.38rem
            }
        }
    }
    .button{
      margin-top: 0.5rem;
    }
    
}
.head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .filter-name{
        font-size: 0.5rem;
    }
    .head-right{
        display: flex;
        align-items: center;  
      
    }
}
.filter-icon{
    width: 0.8rem;
}    
.hover-color{
  color: white;
  background: #7db6fa;
  box-shadow:1px 2px 3px 0px #7db6fa8f;
}
</style>